<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { onMounted, reactive, ref, toRefs } from 'vue'
import { List, ListItem } from '@/components/business/content/index'
import to from '@/utils/awaitTo'
import Api from '@/api/'
import { message } from 'ant-design-vue'

const route = useRoute()

// 响应式数据
const formRef = ref()
const state = reactive({
  open: false, // 弹窗
  title: '', // 标题
  form: {}, // 表单数据
  list: [], // 数据列表
  ellipsis: true, // 是否显示省略号
  sendLoading: false
})

// 响应式数据解析
const { list, open, title, form, ellipsis, sendLoading } = toRefs(state)

/** 获取内容 */
const getContent = async () => {
  // console.log(route.query.topicId);
  const topicId = route.query.topicId as string
  if (topicId) {
    const [error, data] = await to(Api.tpbase.topicContentList({ topicId }))
    if (!error) {
      // console.log(data)
      list.value = data
    }
  }
}

// 重置表单
const reset = () => {
  form.value = {
    topicContentId: '',
    topicContent: ''
  }
}

// 修改内容事件
const handleEditContent = async (item) => {
  reset()
  item.loading = true
  const [error, data] = await to(Api.tpbase.topicEchoContentInfo({ topicContentId: item.topicContentId }))
  if (!error) {
    open.value = true
    title.value = data.topicTitle
    form.value = data
    item.loading = false
  }
}

// 提交内容
const handleSubmit = async (formEl) => {
  if (!formEl) return
  formEl.validate().then(async (values) => {
    const params = Object.assign({}, form.value, values)
    console.log(params)
    sendLoading.value = true
    const [error, data] = await to(Api.tpbase.topicUpdateContent(params))
    sendLoading.value = false
    if (!error && data) {
      message.success('修改成功')
      open.value = false
      setTimeout(async () => {
        await getContent()
        message.success('视图更新成功')
      }, 3000)
    }
  })
}

/** 改变标题 */
const getTitle = () => {
  document.title = route.query.topicTitle as string
}

/** 生命周期 */
onMounted(() => {
  getContent()
  getTitle()
})

/** 内容来源 */
const contentSourceEnum = (text: { insertDataSource: string }) => {
  if (Number(text.insertDataSource) === 1001) {
    return `用户自创`
  } else if (Number(text.insertDataSource) === 1002) {
    return `全网医学科普节选`
  } else if (Number(text.insertDataSource) === 1003) {
    return `chatGpt智能聚合`
  } else {
    return text.insertDataSource
  }
}

</script>

<template>
  <div>
    <List>
      <ListItem v-for="(item,index) in list" :key="index">

        <!-- 第零行 -->
        <div class="mb-3 ml-auto flex items-center">
          <div class="flex items-center mr-5">
            <div class="mr-3 text-sm ">内容ID:</div>
            <div class="text-sm">{{ item.topicContentId }}</div>
          </div>

          <div class="flex items-center mr-5">
            <div class="mr-3 text-sm ">话题来源:</div>
            <a-tag color="#2db7f5">
              {{ contentSourceEnum(item) }}
            </a-tag>
          </div>

          <div class="flex items-center mr-5">
            <div class="mr-3 text-sm ">推送次数:</div>
            <div class="text-sm">{{ item.pushQuantity }}</div>
          </div>

        </div>

        <div class="text-sm leading-6 tracking-widest">
          <a-typography-paragraph
            :content="item.topicContent"
            :ellipsis="ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false"
          />
        </div>

        <!-- 第三行 -->
        <a-space :size="20" class="ml-auto flex">
          <a-space :size="5" class="flex items-center">
            <div>播放量</div>
            <div>{{ item.playbackNumber }}</div>
          </a-space>
          <a-space :size="5" class="flex items-center">
            <div>点赞量</div>
            <div>{{ item.likesNumber }}</div>
          </a-space>
          <a-space :size="5" class="flex items-center">
            <div>评论量</div>
            <div>{{ item.commentNumber }}</div>
          </a-space>
          <a-space :size="5" class="flex items-center">
            <div>分享量</div>
            <div>{{ item.shareNumber }}</div>
          </a-space>
        </a-space>

        <!-- 第四行 -->
        <a-space class="ml-auto mt-3">
          <a-button :disabled="!item.topicContentId" :loading="item.loading" danger type="dashed"
                    @click="handleEditContent(item)">修改内容
          </a-button>
        </a-space>
      </ListItem>
    </List>


    <a-modal v-model:open="open" :ok-button-props="{ loading:sendLoading }" :title="title" width="80%"
             @ok="handleSubmit(formRef)">
      <a-form ref="formRef" :model="form" layout="vertical">
        <a-form-item name="topicContent">
          <a-textarea v-model:value="form.topicContent" :rows='10' />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
